<template>
  <div class="components-input-demo-presuffix" v-if="avalid">
    <!---->
    <a-input @click="openModal" :placeholder="placeholder" v-model="showText" readOnly :disabled="disabled">
      <a-icon slot="prefix" type="cluster" :title="title" />
      <a-icon v-if="showText" slot="suffix" type="close-circle" @click="handleEmpty" title="清空" />
    </a-input>

    <j-popup-onl-report ref="jPopupOnlReport" :multi="multi" 
       v-bind="$attrs" v-on="$listeners" @ok="callBack" />

  </div>
</template>

<script>
  import JPopupOnlReport from './modal/YFPopupOnlReport.vue'

  export default {
    name: 'JPopup',
    components: {
      JPopupOnlReport
    },
    inheritAttrs: false,

    props: {
  
      field: {
        type: String,
        default: '',
        required: true
      },

      /** 排序列，指定要排序的列，使用方式：列名=desc|asc */
      sorter: {
        type: String,
        default: ''
      },
      width: {
        type: Number,
        default: 1200,
        required: false
      },
      placeholder: {
        type: String,
        default: '请选择',
        required: false
      },
      value: {

      },
      triggerChange: {
        type: Boolean,
        required: false,
        default: false
      },
      disabled: {
        type: Boolean,
        required: false,
        default: false
      },
      multi: {
        type: Boolean,
        required: false,
        default: false
      },

      spliter: {
        type: String,
        required: false,
        default: ','
      },

    },
    data() {
      return {
        showText: '',
        title: '',
        avalid: true
      }
    },
    computed: {
      // uniqGroupId() {
      //   if (this.groupId) {
      //     let { groupId, code, field, orgFields, destFields } = this
      //     return `${groupId}_${code}_${field}_${orgFields}_${destFields}`
      //   }
      // }
    },
    watch: {
      value: {
        immediate: true,
        handler: function (val) {
          if (!val) {
            this.showText = ''
          } else {
            // this.showText = val.split(this.spliter).join(',')
            let showText = []
            if (this.field) {//根据字段取值拼接showText
              if (this.multi) {//多选是数组
                let arr = val
                arr.forEach(obj => {
                  showText.push(obj[this.field])
                });
              } else {
                showText.push(val[this.field])
              }

              this.showText = showText.join(this.spliter)
            }
          }
        }
      },
    },
    created() {
    },
    mounted() {
      if (!this.field) {
        this.$message.error('popup参数field未正确配置!')
        this.avalid = false
      }
    },
    methods: {
      openModal() {
        if (this.disabled === false) {
          this.$refs.jPopupOnlReport.show()
        }
      },
      handleEmpty() {
        let res = {}
        if(this.multi){
          res = []
        }
        this.showText = ''
        if (this.triggerChange) {
          this.$emit('callback', res)
        } else {
          this.$emit('input', '', res)
        }
    
      },
      callBack(rows) {
        let obj = {}
        if (this.multi) {
          obj = rows
        } else {
          obj = rows[0]
        }
        if (this.triggerChange) {
          let showText = []
          if (this.field) {//根据字段取值拼接showText
            if (this.multi) {//多选是数组
              let arr = obj
              arr.forEach(item => {
                showText.push(item[this.field])
              });
            } else {
              showText.push(obj[this.field])
            }

            this.showText = showText.join(this.spliter)
          }
          //v-dec时即triggerChange为true时 将整个对象给form页面 让他自己setFieldsValue
          this.$emit('callback', obj)


        } else {

          this.$emit('input', obj)
        }


      }
    }
  }
</script>
<style scoped>
  .components-input-demo-presuffix .anticon-close-circle {
    cursor: pointer;
    color: #ccc;
    transition: color 0.3s;
    font-size: 12px;
  }

  .components-input-demo-presuffix .anticon-close-circle:hover {
    color: #f5222d;
  }

  .components-input-demo-presuffix .anticon-close-circle:active {
    color: #666;
  }
</style>